<!--
  // Copyright (C) 2007-8 Mark Birbeck
  //
  // Licensed under the Apache License, Version 2.0 (the "License");
  // you may not use this file except in compliance with the License.
  // You may obtain a copy of the License at
  //
  //  http://www.apache.org/licenses/LICENSE-2.0
  //
  // Unless required by applicable law or agreed to in writing, software
  // distributed under the License is distributed on an "AS IS" BASIS,
  // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  // See the License for the specific language governing permissions and
  // limitations under the License.
-->
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fresnel="http://www.w3.org/2004/09/fresnel#"
	xmlns:argot="http://argot-hub.googlecode.com/"
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:xsd="http://www.w3.org/2001/XMLSchema"
>
  <head typeof="fresnel:Group">
		<title>Geo formats</title>
  	<link rel="stylesheet" href="geo.css" />
  </head>
  <body rev="fresnel:group">
    <div property="argot:constructor">
      document.Yowl.register(
        "geo",
        [ "Found a Location" ],
        [ 0 ],
        "http://argot-hub.googlecode.com/svn/trunk/_images/geotag_32.png"
      );
    </div>

    <span typeof="fresnel:Format">
      <span property="fresnel:instanceFormatDomain" datatype="argot:jsparqlSelector">
      	select: [ "s", "location", "apikey" ],
      	where:
      	[
	      	{ pattern: [ "?s", "http://purl.org/dc/terms/coverage", "?location" ], setUserData: true },
	      	{ pattern: [ "?doc", "http://argot-hub.googlecode.com/googleapikey", "?apikey" ] }
      	]
      </span>

      <div property="argot:yowl">
        document.Yowl.notify(
          "Found a Location",
          "Found location: " + ${location.content},
          "Geocoding...",
          "geo",
          null,
          false,
          0
        );
      </div>

      <div property="argot:pipesdata">
        url: 'http://maps.google.com/maps/geo',
        params:
          {
            q: ${location.content},
            ql: 'uk',
            callbackParamName: 'callback',
            key: ${apikey.content},
            output: 'json'
          }
      </div>

      <div property="argot:adddata">
      	if (context.data.Status && context.data.Status.code === 200) {
      	document.meta.store.add(
      	"${s}",
      	"${s}",
      	"a",
      	"http://www.w3.org/2003/01/geo/wgs84_pos#SpatialThing",
      	false
      	);
      	
      	document.meta.store.add(
      	"${s}",
      	"${s}",
      	"http://purl.org/dc/terms/coverage",
      	{
      	content: "${location}",
      	datatype: ""
      	},
      	true,
      	context.obj.user
      	);
      	
      	document.meta.store.add(
      	"${s}",
      	"${s}",
      	"http://www.w3.org/2003/01/geo/wgs84_pos#long",
      	{
      	content: context.data.Placemark[0].Point.coordinates[0],
      	datatype: ""
      	},
      	true
      	);
      	
      	document.meta.store.add(
      	"${s}",
      	"${s}",
      	"http://www.w3.org/2003/01/geo/wgs84_pos#lat",
      	{
      	content: context.data.Placemark[0].Point.coordinates[1],
      	datatype: ""
      	},
      	true
      	);
      	
      	document.meta.store.add(
      	"${s}",
      	"${s}",
      	"http://www.w3.org/2000/01/rdf-schema#label",
      	{
      	content: context.data.Placemark[0].address,
      	datatype: ""
      	},
      	true
      	);
      	}
      </div>
      
      <!--
        Once the data is loaded, run another group of formats.
      -->
      <span rel="argot:afterpipesdata">
        <span typeof="fresnel:Group">
          <div rev="fresnel:group">
            <!--
              The first format sets an icon next to any geo:spatialThing.
            -->
            <div typeof="fresnel:Format">
              <span property="fresnel:instanceFormatDomain" datatype="argot:jsparqlSelector">
              	select: [ "long", "lat", "label" ],
              	from: "${s}",
              	where:
              	[
	              	{ pattern: [ "?s", "http://purl.org/dc/terms/coverage", "?location" ], setUserData: true },
	              	{ pattern: [ "?s", "a", "http://www.w3.org/2003/01/geo/wgs84_pos#SpatialThing" ] },
	              	{ pattern: [ "?s", "http://www.w3.org/2000/01/rdf-schema#label", "?label" ] }
              	]
              </span>

              <span rel="argot:embed">
              	
              	<!-- span rel="argot:icon" resource="icon-map.png"></span -->
              	
              	<div property="argot:template" datatype="rdf:XMLLiteral">
              		<span>
              			<a alt="Show ${label} on a map" style="color: blue; cursor: pointer; text-decoration: underline;"
              				oldonclick="document.openDialog( this.parentNode.parentNode );" href="/?subject=${ident}&res_view_type=map"
              				>${label}</a>
              			<div style="width: 300px; height: 200px;">
              				<div class="hd">${label}</div>
              				<div class="bd">
              					<img src="http://maps.google.com/staticmap?markers=${lat},${long}&amp;zoom=8&amp;size=300x200&amp;key=ABQIAAAAXcwhe9rZz_gwjKpvBgKJmBSZWHOGrTftuRG8HZuFKdk-I3gWvBRGwIw-sKD1NB1Xg2DX8cft0GvlRw" />
              					
              				</div>
              			</div>
              		</span>
              	</div>
              	
              	<div property="argot:init">
              		if (GBrowserIsCompatible()) {
              		var globalMap =  document.getElementById( "search-map" );
              		var latlng;
              		var map;
              		var opts = { };
              		var marker;
              		
              		if ( "${title}" !== "" ) {
              		opts["title"] = "${title}";
              		}
              		el.simpledialog1 = new YAHOO.widget.Dialog(
              		el.getElementsByTagName("div")[0],
              		{
              		width: "300px",
              		height: "280px",
              		context: [ document.body, "tl", "tl" ],
              		fixedcenter: true,
              		iframe: true,
              		zIndex: 1000,
              		visible: false, 
              		draggable: true,
              		close: true,
              		constraintoviewport: true, 
              		buttons: [ { text: "Cancel",  handler: function() { this.hide(); } } ]
              		}
              		);
              		
              		el.simpledialog1.render();
              		
              		if ( globalMap ) {
              		if ( globalMap.map ) {
              		map = globalMap.map;
              		} else {
              		document.openDialog = function( o ) {
              		o.simpledialog1.show();
              		return;
              		};
              		map = new GMap2( globalMap );
              		map.enableGoogleBar();
              		map.addControl(
              		new DragZoomControl(
              		{
              		opacity: .2,
              		border: "2px solid red"
              		},
              		{
              		buttonHTML: "&lt;img src='http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/examples/zoom-button.gif' />",
              		buttonZoomingHTML: "&lt;img src='http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/examples/zoom-button-activated.gif' />",
              		buttonStartingStyle: {width: "24px", height: "24px"},
              		overlayRemoveTime: 1000
              		},
              		{ }
              		),
              		new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(13, 120))
              		);
              		map.addControl(new GSmallMapControl());
              		map.addControl(new GMapTypeControl());
              		map.addControl(new GOverviewMapControl());
              		map.setCenter(new GLatLng(0, 0), 0);
              		globalMap.map = map;
              		globalMap.bounds = new GLatLngBounds();
              		globalMap.markers = [ ];
              		
              		var baseIcon = new GIcon(G_DEFAULT_ICON);
              		baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
              		baseIcon.iconSize = new GSize(20, 34);
              		baseIcon.shadowSize = new GSize(37, 34);
              		baseIcon.iconAnchor = new GPoint(9, 34);
              		baseIcon.infoWindowAnchor = new GPoint(9, 2);
              		globalMap.baseIcon = baseIcon;
              		}
              		} else {
              		map = new GMap2( el.getElementsByTagName("div")[0] );
              		map.addControl(new GSmallMapControl());
              		}
              		latlng = new GLatLng(${lat}, ${long});
              		globalMap.bounds.extend(latlng);
              		var letteredIcon = new GIcon(globalMap.baseIcon);
              		var letter = String.fromCharCode("A".charCodeAt(0) + globalMap.markers.length);
              		letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
              		
              		opts.icon = letteredIcon;
              		marker = new GMarker(latlng, opts);
              		marker.bindInfoWindowHtml( obj.user.innerHTML );
              		marker._show = function( ) {
              		this.openInfoWindowHtml( obj.user.innerHTML );
              		};
              		map.addOverlay( marker );
              		map.setZoom(map.getBoundsZoomLevel(globalMap.bounds));
              		map.setCenter(globalMap.bounds.getCenter());
              		globalMap.markers.push( marker );
              		}
              	</div>
              </span>
            </div>

            <!--
              This format adds a map to show the coordinates.
            -->
            <div typeof="fresnel:Format">
              <span property="fresnel:instanceFormatDomain" datatype="argot:jsparqlSelector">
                select: [ "long", "lat", "label" ],
                where:
                [
                  { pattern: [ "?s", "a", "http://www.w3.org/2003/01/geo/wgs84_pos#Point" ], setUserData: true },
                  { pattern: [ "?s", "http://www.w3.org/2003/01/geo/wgs84_pos#long", "?long" ] },
                  { pattern: [ "?s", "http://www.w3.org/2003/01/geo/wgs84_pos#lat", "?lat" ] },
                  { pattern: [ "?s", "http://www.w3.org/2000/01/rdf-schema#label", "?label" ] }
                ]
              </span>

              <span rel="argot:embed">
                <!-- span rel="argot:icon" resource="icon-map.png"></span -->
                <div property="argot:template" datatype="rdf:XMLLiteral">
                  <div class="geo-map">
                    <!-- div style="padding: 1em; color: gray">Loading...</div -->
                    <img src="http://maps.google.com/staticmap?markers=${lat.content},${long.content}&zoom=8&size=150x100&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" />
                  </div>
                </div>
                <div property="argot:init">
                  if (GBrowserIsCompatible()) {
                    var globalMap =  document.getElementById( "search-map" );
                    var latlng;
                    var map;
                    var opts = { };
                    var marker;
                    if ( ${title} ) {
                      opts["title"] = ${title.content};
                    }

                    if ( globalMap ) {
                      if ( globalMap.map ) {
                        map = globalMap.map;
                      } else {
                        map = new GMap2( globalMap );
                        map.enableGoogleBar();
                        map.addControl(
                          new DragZoomControl(
                            {
                              opacity: .2,
                              border: "2px solid red"
                            },
                            {
                              buttonHTML: "&lt;img src='http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/examples/zoom-button.gif' />",
                              buttonZoomingHTML: "&lt;img src='http://gmaps-utility-library.googlecode.com/svn/trunk/dragzoom/release/examples/zoom-button-activated.gif' />",
                              buttonStartingStyle: {width: "24px", height: "24px"},
                              overlayRemoveTime: 1000
                            },
                            { }
                          ),
                          new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(13, 120))
                        );
                        map.addControl(new GSmallMapControl());
                        map.addControl(new GMapTypeControl());
                        map.addControl(new GOverviewMapControl());
                        map.setCenter(new GLatLng(0, 0), 0);
                        globalMap.map = map;
                        globalMap.bounds = new GLatLngBounds();
                      }
                    } else {
                      map = new GMap2( el.getElementsByTagName("div")[0] );
                      map.addControl(new GSmallMapControl());
                    }
                    latlng = new GLatLng(${lat.content}, ${long.content});
                    globalMap.bounds.extend(latlng);
                    marker = new GMarker(latlng, opts);
                    marker.bindInfoWindowHtml( ${user}.innerHTML );
                    map.addOverlay( marker );
                    map.setZoom(map.getBoundsZoomLevel(globalMap.bounds));
                    map.setCenter(globalMap.bounds.getCenter());
                  }
                </div>
              </span>
            </div>
          </div>
        </span>

      </span>
    </span>
    
    <!--
      This format adds a map to show the coordinates.
      
      At the moment it's a direct copy of the one above, so we need to
      work out a way to require only one.
    -->
    <div about="#longlat" typeof="fresnel:Format">
      <span property="fresnel:instanceFormatDomain" datatype="argot:jsparqlSelector">
        select: [ "long", "lat", "title" ],
        where:
        [
	        { pattern: [ "?s", "http://www.w3.org/2006/vcard/ns#geo", "?b" ], setUserData: true },
          { pattern: [ "?b", "http://www.w3.org/2003/01/geo/wgs84_pos#long",  "?long" ] },
          { pattern: [ "?b", "http://www.w3.org/2003/01/geo/wgs84_pos#lat",   "?lat" ] },
          { pattern: [ "?b", "http://purl.org/dc/terms/title", "?title" ], optional: true }
        ]
      </span>

      <span rel="argot:embed">
        <!-- span rel="argot:icon" resource="icon-map.png"></span -->
        <div property="argot:template" datatype="rdf:XMLLiteral">
          <div class="geo-map">
            <div style="padding: 1em; color: gray">Loading...</div>
          </div>
        </div>
        <div property="argot:init">
          if (GBrowserIsCompatible()) {
            var latlng = new GLatLng(${lat}, ${long});
            var globalMap =  document.getElementById( "generalmap" );
            var map;
            var opts = { };
            var marker;

            if ( "${title}" ) {
              opts["title"] = "${title}";
            }
            marker = new GMarker(latlng, opts);
            marker.bindInfoWindowHtml( context.data.innerHTML );

            if ( globalMap ) {
              if ( globalMap.map === undefined ) {
                globalMap.map = new GMap2( globalMap );
              }
              map = globalMap.map;
            } else {
              map = new GMap2( el.getElementsByTagName("div")[0] );
            }
            map.setCenter(latlng, 13);
            map.addOverlay( marker );
            map.addControl(new GSmallMapControl());
          }
        </div>
      </span>
    </div>
  	
  	<!--
  		This format adds a relationship between markers and a map.
  	-->
  	<div about="#marker" typeof="fresnel:Format">
  		<span property="fresnel:instanceFormatDomain" datatype="argot:jsparqlSelector">
  			select: [ "?s", "?uuid" ],
  			distinct: false,
  			where:
  			[
  			{ pattern: [ "?s", "a", "http://www.w3.org/2003/01/geo/wgs84_pos#Marker" ], setUserData: true }
  			]
  		</span>
  		
  		<span rel="argot:embed">
  			<div property="argot:template" datatype="rdf:XMLLiteral">
  				<img src="http://www.google.com/mapfiles/markerA.png" />
  			</div>
  			<span property="argot:init">
  				el.getElementsByTagName("img")[0].src = "http://www.google.com/mapfiles/marker"
  				+	String.fromCharCode("A".charCodeAt(0) + Number("${uuid}"))
  				+ ".png";
  				
  				el.onclick = function(e) {
  				document.getElementById( "search-map" ).markers[ Number("${uuid}") ]._show();
  				};
  			</span>
  		</span>
  	</div>
  </body>
</html>
